<!-- 数据源管理 -->
<template>
  <div>
    <div class="children_content">
      <div class="add_btns_box">
        <div class="box_left">
          <div class="title">数据源列表</div>
        </div>
        <div class="box_right">
          <Space>
            <Button type="primary" @click="handleEdit()" icon="md-add">创建新数据源</Button>
          </Space>
        </div>
      </div>
      <!-- <searchGroup v-model="searchObj" :options="searchOptions" @search="searchChange"
        @getHeight="setHeight" /> -->

      <div class="content_table">
        <TemplateTable
          ref="tableRef"
          :data="tableData"
          :columns="tableColumns"
          :loading="loading"
          :height="tableHeight"
          :page="pageIndex"
          :page-size="pageSize"
          :total="total"
          border="none"
          size="small"
          stripe
          @page-change="handlePageChange"
        >
        </TemplateTable>
      </div>
    </div>

    <EditDialog
      ref="editDialogRef"
      v-if="showDialog"
      @cancel="handleDialogCancel"
      @submit="handleDialogSubmit"
    />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, inject, watch, nextTick, computed } from 'vue'
import { Message } from 'view-ui-plus'
import moment from 'moment'

import { dataSource } from '@/api/modules/modelSetting'

import EditDialog from './components/EditDialog.vue'
import TemplateTable from '@/components/TemplateTable/index.vue'

// 屏幕高度
const screenHeight = inject('screenHeight')
// 搜索组件高度
const searchHeight = ref(null)
// 表格高度
const tableHeight = ref(0)
// 监听 screenHeight 的变化
watch(
  screenHeight,
  (newHeight) => {
    if (searchHeight.value) {
      tableHeight.value = newHeight - searchHeight.value - 245
    } else {
      tableHeight.value = newHeight - 245
    }
  },
  { immediate: true }
)

// 是否显示对话框
const showDialog = ref(false)
const editDialogRef = ref(null)

// 当前对象
const { proxy } = getCurrentInstance()

// 搜索条件字段
const searchObj = ref({
  name: '',
  type: '',
  dataSource: ''
})

const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)

// 列表数据
const tableData = ref([])

// 加载状态
const loading = ref(false)

// 表格列配置
const tableColumns = computed(() => [
  { title: '名称', field: 'name', minWidth: 120 },
  { title: '数据库类型', field: 'databasetype', minWidth: 140 },
  { title: '账号', field: 'account', minWidth: 140 },
  {
    title: '创建时间',
    field: 'createTime',
    minWidth: 140,
    formatter: ({ cellValue }) => moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
  },
  {
    title: '操作',
    type: 'action',
    width: 200,
    fixed: 'right',
    actions: [
      {
        text: '测试',
        type: null,
        onClick: (row) => handleTest(row)
      },
      {
        text: '编辑',
        onClick: (row) => handleEdit(row.id)
      },
      {
        text: '删除',
        type: 'del',
        onClick: (row) => handleDelete(row)
      }
    ]
  }
])

// 批量删除
const batchDel = () => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否批量删除选中数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      Message.success('批量删除成功')
      getPageData(true)
    }
  })
}

// 编辑数据源
const handleEdit = (id) => {
  showDialog.value = true
  nextTick(() => {
    editDialogRef.value.initDialog(id)
  })
}

const handleTest = (data) => {
  dataSource
    .test({
      data: {
        id: data.id
      }
    })
    .then(({ data }) => {
      Message[data ? 'success' : 'error'](data ? '测试成功' : '测试失败')
    })
}

// 删除数据源
const handleDelete = (row) => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await dataSource.delete({
        data: {
          id: row.id
        }
      })
      Message.success('删除成功')
      getPageData(true)
    }
  })
}

// 处理对话框取消
const handleDialogCancel = () => {
  showDialog.value = false
}

// 处理对话框提交
const handleDialogSubmit = () => {
  showDialog.value = false
  // 刷新数据列表
  getPageData(true)
}

// 获取数据源列表
const getPageData = (reset) => {
  if (reset) {
    pageIndex.value = 1
  }

  loading.value = true

  dataSource
    .page({
      query: {
        p: pageIndex.value,
        ps: pageSize
      },
      data: searchObj.value
    })
    .then(({ data }) => {
      tableData.value = data?.content || []
      total.value = data?.totalElements || 0
    })
    .finally(() => {
      loading.value = false
    })
}

// 处理页码变化
const handlePageChange = (page) => {
  pageIndex.value = page
  getPageData()
}

// 获取组件高度
const setHeight = (height) => {
  searchHeight.value = height
  tableHeight.value = screenHeight.value - searchHeight.value - 245
}

onMounted(() => {
  getPageData()
})
</script>

<style lang="scss" scoped></style>
